{% extends "mweb/base.html" %}
{% load static %}

{% block extra_css %}
    <link href="{% static 'css/hb_active.css' %}" rel="stylesheet">
{% endblock extra_css %}
<!-- CONTENT
  =====================================================================-->

{% block content %}
	<div class="active_wrap">
		<img src="https://res.yyzb.com/gma/registration/top_bg.jpg" alt="上YYZB 聊知音" class="active_introduce"/>
		<input type="button" name="active_download" class="active_download" value="立即下载" onclick="javascript:download_app()" />
        <a name="download_section"> </a>
		<div class="active_form">
			<form id="active_form">
				<div class="form_group">
					<input type="number" name="active_phone" id="mobile" maxlength="11" placeholder="请输入11位手机号码" />
				</div>
				<div class="form_group">
					<input type="number" name="active_code" id="sms_code" maxlength="6" placeholder="请输入验证码" />
					<button type="button" class="active_send" id="fetch_sms_button" onClick="javascript:click_get_sms_code_btn();">获取</button>
				</div>
				<div class="form_group">
                    <input type="button" name="active_submit" class="active_send" value="立即下载" onclick="javascript:click_download_btn()" />
				</div>
			</form>
		</div>
	</div>
{% endblock content %}

<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}
<script>

// 修复iOS键盘收起留白的问题
document.body.addEventListener("focusout", () => {
    setTimeout(() => {
        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
    }, 100);
});

function download_app() {
    let using_wechat = is_wechat();
    if (using_wechat) {
        let tips = create_open_with_browser_tips();
        document.body.appendChild(tips);
    } else {
        window.location =  '#download_section';
    }
}

function click_get_sms_code_btn() {
    const mobile = $('#mobile').val();
    if (!/^\d{11}$/.test(mobile)) {
        alert("无效的手机号码！");
        return;
    }

    // 隐藏获取验证码按钮
    setTimeout(() => {
        $('#fetch_sms_button').hide();
    }, 200);

    // 1分钟后显示发送按钮
    setTimeout(() => {
        $('#fetch_sms_button').show();
    }, 60 * 1000);

    let url = '{% url 'mweb:api_fetch_smscode' %}';
    let data = {
        'mobile': mobile,
    };
    my_ajax(url, data, '', '', () => {
        show_toast('验证码已发送');
        console.log('send');
    });
}

function click_download_btn() {
    const mobile = $('#mobile').val();
    if (!/^\d{11}$/.test(mobile)) {
        alert("无效的手机号码！");
        return;
    }

    const sms_code = $('#sms_code').val();
    if (!/^\d{4}$/.test(sms_code)) {
        alert("无效的手机验证码!");
        return;
    }

    let url = '{% url 'mweb:api_user_register' %}';
    let data = {
        'mobile': mobile,
        'sms_code': sms_code,
        'app': '{{ app }}',
        'channel': '{{ channel }}',
    };
    my_ajax(url, data, '', '', () => {
        if (is_ios_device()) {
            show_toast('开始下载iOS版本');
            window.location = '{{ ios_download_url }}';
        } else {
            let using_wechat = is_wechat();
            if (using_wechat) {
                setTimeout(() => {
                    // 返回顶部
                    document.body.scrollTo(0,0);

                    // 显示在浏览器中打开的提示
                    let tips = create_open_with_browser_tips();
                    document.body.appendChild(tips);
                }, 150);
                return;
            }

            show_toast('开始下载Android版本');
            window.location = '{{ android_download_url }}';
        }
    });
}
</script>
{% endblock extra_js %}
